<template>
<uni-shadow-root class="partials-productList-productListSlide-productListSlide"><template name="productListSlide">
<block v-if="relateBean.length!=0">
  <scroll-view class="recommend_scroll_x_box" scroll-x="true">
    <block v-for="(item,index) in (relateBean)" :key="item.index" v-if="jsonData.count>0?index<jsonData.count:'true'">
      <view class="recommend_hot_box" :style="'background-color:'+(color)+';'" @click="tolinkUrl" :data-info="item">
      <view class="CouponsImg">
        <image mode="aspectFill" :src="(item.imagePath)+'?x-oss-process=style/preview'"></image>
        <view class="product_jifen_block" v-if="item.needJifen">需消耗
          <text class="product_jifen_text" :style="'color: '+(defaultColor)+';'">{{item.needJifen}}积分</text>
        </view>
        <view class="sold_out_block" v-if="item.stock<=0">售罄</view>
      </view>
      <view class="chooseName1">{{item.name}}</view>
       <view class="productListSlidePrice">
         <view :class="'money '+(jsonData.showCard==1?"limit":"")">
            <text class="price" v-if="item.promotion>0">￥{{item.promotionPrice}}</text>
            <text class="price" v-else>￥{{item.price}}</text>
            <text class="price" v-if="item.maxPrice>item.price">-{{item.maxPrice}}</text>
            <text v-if="item.unitShow" style="color:#bbb;font-size:24rpx;margin-left:4rpx;letter-spacing:4rpx;">/{{item.unitShow}}</text>
            <text v-if="item.maxPrice<=item.price&&item.tagPrice>item.price" class="tag_price">￥{{item.tagPrice}}</text>
         </view>
         <text class="cart" v-if="jsonData.showCard==1" @click.stop.prevent="readyAddCar" :data-product="item">+</text>
       </view>
      </view>
    </block> 
  </scroll-view>
</block>
<block v-if="relateBean.length==0">
    <view class="noproduct">
      <image mode="widthFix" src="https://image1.sansancloud.com/xianhua/2019_12/16/15/54/55_950.jpg?x-oss-process=style/preview_120"></image>
      <text>没有相关商品</text>
    </view>
</block>

</template></uni-shadow-root>
</template>

<script>

global['__wxRoute'] = 'partials/productList/productListSlide/productListSlide'

Component({})

export default global['__wxComponents']['partials/productList/productListSlide/productListSlide']
</script>
<style platform="mp-weixin">
.recommend_scroll_x_box {
  height: 340rpx;
  white-space: nowrap;
  display: flex;
  margin-top: 10rpx;
}
.recommend_hot_box {
  width: 200rpx;
  height: 340rpx;
  margin-left: 24rpx;
  display: inline-block;
  text-align: center;
}
.CouponsImg {
  width: 200rpx;
  height: 200rpx;
  overflow: hidden;
  border-radius: 0.2em;
  position: relative;
}
.CouponsImg image{
  width: 100%;
  height: 100%;
}
.chooseName1{
  height: 65rpx;
  text-align: left;
  font-size: 25rpx;
  margin-top: 10rpx;
  white-space:normal;
  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  margin-bottom: 10rpx
}
.productListSlidePrice{
    width: 100%;
    height: 50rpx;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    display: flex;
}
.productListSlidePrice{
   font-size: 30rpx;
   color: red;
}
.tag_price{
  text-decoration:line-through;
  font-size: 24rpx;
  color:#bbb;
  margin-left: 6rpx;
}
.price{
  font-size: 38rpx;
  height:38rpx;
  line-height:38rpx;
}
.money{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
}
.limit{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  width: 70%;
}
.cart{
  height: 30rpx;
  width: 30rpx;
  font-size: 30rpx;
  text-align: center;
  line-height: 30rpx;
  border: 1rpx solid red;
  border-radius: 30rpx;
  padding: 5rpx;
}
</style>